<template>
  <zm-view ref="view" :scroll="false">
    <!--  #ifndef WEB -->
    <zm-navbar :is-back="false" :border-bottom="false" background="#fff" title="活动"></zm-navbar>
    <!-- #endif -->
    <zm-list ref="list" :options="options" @query="handleQuery">
      <view v-for="(item, index) in list" :key="index" class="activity-item flex flex-col mx-24 mt-20 pb-20" @click="handleClick(item)">
        <u-image :src="item.image" width="100%" height="230rpx" radius="16rpx"></u-image>
        <view class="flex flex-col mt-30">
          <view class="flex items-center justify-between">
            <text class="font-32 font-bold text-row-1 mr-24">{{ item.activityName }}</text>
            <view class="flex items-center text-line-1">
              <zm-icon name="eye" size="32rpx" color="#cccccc"></zm-icon>
              <text class="text-aaa ml-10">{{ item.pv }}</text>
            </view>
          </view>
          <text class="mt-20">{{ item.tTimeDes }}</text>
        </view>
      </view>
    </zm-list>
  </zm-view>
</template>

<script>
import hook from "@/mixins/hook"
import page from "@/mixins/page"
export default {
  mixins: [hook, page],
  data() {
    return {
      list: [],
      options: { emptyText: "暂无活动内容" }
    }
  },
  methods: {
    handleClick(item) {
      this.toView({
        url: "pages/main/activity-info/activity-info",
        params: { activityId: item.activityId }
      })
    },
    async handleQuery({ type, page, pageSize, fail, success }) {
      try {
        const res = await this.$api.activity.getActivityList({ page, pageSize })
        this.list = type == "load" ? [...this.list, ...res] : res
        success({ list: this.list, total: this.list.length })
      } catch (e) {
        fail()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.activity-item {
  border-bottom: 1rpx solid #eeeeee;
}
</style>
